<template>
	<view class="content">
    <view class="home-drop" id="target">
      <image src="/static/image/main.png" mode="scaleToFill" class="home-drop_img"></image>
    </view>
    <view class="home-content">
      <view class="circle-item">
        <view class="list-item">
          <view class="list-item__container">
            <view class="list-item__header">
              <view class="list-item__icon">
                <image src="/static/logo.png" mode="scaleToFill" class="list-item__icon-img"></image>
              </view>
            </view>
            <view class="list-item__content list-item__content--center">
              <text class="list-item__content-title">管理员ID</text>
              <view class="list-item__content-note u-m-t-10">
                <text class="list-item__content-note_id">广东爱车族</text>
                <text class="list-item__content-note_num">30+</text>人加入
              </view>
            </view>
          </view>
        </view>
        <view class="circle-item_QR">
          <image src="/static/image/1.png" mode="aspectFit" class="img"></image>
        </view>
        <view class="circel-item__explain">
          <view class="circel-item__explain-title">流程说明</view>
          <view class="u-m-t-54 u-m-b-54">
            <view class="circel-item__explain-text">欢迎推荐身边的朋友加入</view>
            <view class="circel-item__explain-text">分享本页面即可邀请车主进行认证</view>
            <view class="circel-item__explain-text">1、通过专属链接或者二维码推荐好友，享5积分/人</view>
            <view class="circel-item__explain-text">2、推荐的好友完成认证，享100积分/人</view>
          </view>
          <view>欢迎加入</view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import Specification from '@/components/Specification/Specification.vue';
	export default {
    components:{
    	Specification,
    },
		data() {
			return {
        Height:'0',
			}
		},
		onLoad(options) {
		  uni.setNavigationBarTitle({
		    title: options.Name
		  });
		  this.Name = options.Name
		},
		methods: {
      OrderNow(){
        uni.navigateTo({
        	url: '/pages/Mall/OrderInfo/OrderInfo'
        });
      },
      ShoppingCart(){
        uni.navigateTo({
        	url: '/pages/Mall/ShoppingCart/ShoppingCart'
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
    background-color: #ffffff;
    height: calc(100vh - var(--window-top));
    .home-drop{
      width: 100%;
      height: 420rpx;
			position: fixed;
			z-index: 1;
      .home-drop_img{
        width: 100%;
        height: 100%;
      }
    }
    .home-content{
      width: 100%;
      background-color: #ffffff;
      border-top-left-radius: 28rpx;
      border-top-right-radius: 28rpx;
      position: absolute;
      z-index: 10;
      top: 420rpx;
      margin-top: -40rpx;
      padding-top: 40rpx;
    }
    .circle-item{
      padding:32rpx;
      .list-item{
        display: flex;
        font-size: 32rpx;
        position: relative;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        flex-direction: row;
        cursor: pointer;
        border-radius: 28rpx;
        margin-bottom: 32rpx;
        .list-item__container{
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          overflow: hidden;
          .list-item__header {
            display: flex;
            flex-direction: row;
            align-items: center;
            .list-item__icon{
              margin-right: 18rpx;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .list-item__icon-img{
                  display: block;
                  height: 150rpx;
                  width: 150rpx;
                  margin-right: 20rpx;
                  border-radius: 50%;
              }
            }
          }
          .list-item__content{
            display: flex;
            padding-right: 16rpx;
            flex: 1;
            color: #3b4144;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            .list-item__content-title{
              font-size: 32rpx;
              overflow: hidden;
              font-weight: 600;
            }
            .list-item__content-note{
              margin-top: 8rpx;
              overflow: hidden;
              .list-item__content-note_id{
                font-weight: 600;
                position: relative;
                margin-right: 24rpx;
              }
              .list-item__content-note_id::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -10rpx;
                width: 100%;
                height: 2rpx;
                background-color: black; /* 设置下划线颜色 */
                margin-bottom: 10rpx; /* 设置下划线与文本底部的间距 */
              }
              .list-item__content-note_num{
                font-weight: 600;
              }
            }
          }
          .list-item__content--center{
            justify-content: center;
          }
          
        }
      }
      .circle-item_QR{
        width: 320rpx;
        height: 320rpx;
        margin: 0 auto;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      .circel-item__explain{
        margin-top: 56rpx;
        .circel-item__explain-title{
        }
        .circel-item__explain-text{
          line-height: 1.5rem;
        }
      }
    }
	}
  
  
</style>
